<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="requestParameters" :inline="true" ref="requestParameters">
          <el-form-item label="关键字">
            <el-input
              v-model="requestParameters.keyword"
              placeholder="根据文章标题搜索"
              style="width: 250px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" class="state">
            <el-select v-model="requestParameters.state" placeholder="请选择">
              <el-option label="禁用" value="0" />
              <el-option label="启用" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clearSearch">清除</el-button>
            <el-button size="small" type="primary" @click="searchRandom">搜索</el-button>
          </el-form-item>
          <el-form-item class="addSkill">
            <el-button type="success" icon="el-icon-edit" @click="handleChange('add')">新增技巧</el-button>
          </el-form-item>
        </el-form>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="序号" type="index" />
          <el-table-column align="center" label="文章标题">
            <template slot-scope="scope">
              <span>{{ scope.row.title }}</span>
              &nbsp;&nbsp;
              <span
                v-if="scope.row.videoURL"
                class="el-icon-film"
                style="color:blue"
                @click="checkVideoFun(scope.row.videoURL)"
              ></span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="阅读数">
            <template slot-scope="scope">
              <span>{{ scope.row.visits }}</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | dateFormat }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.state ? '已启用' : '已禁用' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="showPreDialog(scope.row)">预览</el-button>
              <el-button type="text" size="mini" @click="handleState(scope.row)">
                <span>{{ !scope.row.state ? '启用' : '禁用' }}</span>
              </el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="scope.row.state ? false : true"
                @click="handleChange(scope.row.id)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="scope.row.state ? false : true"
                @click="deleteArticle(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[2, 5, 7]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 新增,编辑文章弹层 -->
        <Dialog ref="editArticle" :ruleForm="formData" :title="titleInfo" @confirm="getList"></Dialog>
        <!-- 预览文章弹层 -->
        <preview-article ref="preArticle" :preArticle="preArticle" />
        <!-- 视频弹出层 -->
        <div class="mask" v-if="videoState == true" @click="masksCloseFun"></div>
        <div class="videomasks" v-if="videoState == true">
          <!-- 视频：h5的视频播放video -->
          <video :src="videoSrc" controls="controls" autoplay></video>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, detail, remove } from '@/api/hmmm/articles'
// import { status } from '@/api/hmmm/constants'
import Dialog from './../components/articles-add'
import previewArticle from './../components/articles-preview'

export default {
  name: 'Articles',
  components: {
    Dialog,
    previewArticle
  },
  data() {
    return {
      requestParameters: {
        page: 1, // 当前页数
        pagesize: 2,
        keyword: '',
        state: null // 1是启用，0是禁用
      },
      formData: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: null
      },
      preArticle: '', // 预览的数据
      titleInfo: '',
      alertText: '',
      tableKey: 0,
      dataList: [], //数据列表
      listLoading: false,
      total: 0,
      videoSrc: '',
      videoState: false
    }
  },
  // computed: {
  //   status() {
  //     return status
  //   }
  // },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList(params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      // 获取数据给dataList
      console.log(res)
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `数据一共 ${this.total} 条`
      this.listLoading = false
    },
    // 搜索信息
    searchRandom() {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    // 清空输入框和选择框
    clearSearch() {
      this.requestParameters.keyword = ''
      this.requestParameters.state = ''
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val
      this.getList()
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 添加、编辑之后表单清空
    query() {
      this.formData = {}
    },
    // 新增,编辑文章
    handleChange(id) {
      this.query()
      this.$refs.editArticle.dialogFormV()
      if (id === 'add') {
        this.titleInfo = '添加文章' // 给弹层传参
      } else {
        this.titleInfo = '编辑文章' // 给弹层传参
        this.hanldeEditForm(id)
      }
    },
    // 编辑文章
    async hanldeEditForm(id) {
      this.formData.id = id
      const { data: res } = await detail({ id: id })
      // 获取详情 给formData
      this.formData = res
    },
    // 删除文章
    async deleteArticle(data) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }
      await remove(data)
      this.getList()
    },
    // 切换状态
    async handleState(val) {
      //   if (val.state === true) {
      //     val.state = 0
      //   } else {
      //     val.state = 1
      //   }
      //   // 更换状态请求体
      //   var data = {
      //     id: val.id,
      //     state: val.state
      //   }
      //   // 发请求更改状态
      //   await changeState(data)
      //   // this.$message.success('更新用户状态成功！')
      //   this.getList(this.requestParameters)
      val.state = val.state === 0 ? 1 : 0
    },
    showPreDialog(row) {
      // 显示弹框
      this.$refs.preArticle.dialogFormV()
      // 把该行数据给预览数据
      this.preArticle = row
    },
    //点击按钮出现弹窗播放视频
    checkVideoFun(videos) {
      console.log(1111)
      this.videoState = true
      this.videoSrc = videos
    },
    masksCloseFun() {
      this.videoState = false
    }
  }
}
</script>

<style scoped lang="less">
/deep/.el-form {
  padding-left: 30px;
  position: relative;
  .state {
    padding-left: 50px;
  }
  .addSkill {
    position: absolute;
    right: 0;
  }
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  background-color: #000000;
  opacity: 0.6;
}
// 内容层 z-index要比遮罩大，否则会被遮盖
.videomasks {
  max-width: 1200px;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
}
.videomasks video {
  width: 100%;
  height: 100%;
}
</style>
